/*
 * @Description: 审核日志弹窗
 * @Author: Rfan
 * @Date: 2022-05-12 16:28:15
 * @LastEditTime: 2022-05-19 17:19:52
 */

import { useEffect, useState } from 'react';
import { Button, Modal, Table } from 'antd';
import type { FC } from 'react';
import { ICommonDialog } from '@/interfaces/global';

const { Column } = Table;
interface ReviewLogProps extends ICommonDialog {}

const ReviewLogDialog: FC<ReviewLogProps> = (props) => {
  console.log('ReviewLog', props.visible);
  const { visible, onClose } = props;
  const [loading, setLoading] = useState(false);
  const [total, setTotal] = useState(0);
  const [listQuery, setListQuery] = useState({
    pageNo: 1,
    pageSize: 10,
    params: {}
  });

  useEffect(() => {
    if (visible) {
      setLoading(false);
      setTotal(0);
    }
  }, [visible]);

  /**
   * @description: 关闭弹窗
   */
  const onCancel = () => {
    onClose();
  };
  /**
   * @description 切换页码触发
   * @param {number} page 页码
   * @param {number} pageSize 每页条目数
   */
  const pageChange = (page: number, pageSize: number) => {
    setListQuery((state) => ({
      ...state,
      pageNo: page,
      pageSize
    }));
  };

  return (
    <Modal
      title="审核日志"
      visible={visible}
      width={600}
      maskClosable={false}
      destroyOnClose
      onCancel={onCancel}
      footer={[
        <Button key="close" onClick={onCancel}>
          确定
        </Button>
      ]}
    >
      <Table
        dataSource={[]}
        loading={loading}
        rowKey="id"
        bordered
        pagination={{
          current: listQuery.pageNo,
          pageSize: listQuery.pageSize,
          total,
          onChange: pageChange
        }}
      >
        <Column title="序号" dataIndex="id" key="id" align="center" />
        <Column title="时间" dataIndex="code" key="code" align="center" />
        <Column title="审核人" dataIndex="name" key="name" align="center" />
        <Column title="审核状态" dataIndex="name" key="name" align="center" />
        <Column title="审核意见" dataIndex="name" key="name" align="center" />
      </Table>
    </Modal>
  );
};

export default ReviewLogDialog;
